<template>
	<view class="body">
		<view class="head">
			<!-- <view style="display: inline-block;">
				<view class="body-data" style="display: inline-block;">
					<view style="display: inline-block;position:sticky;width: calc(30vw);margin-top: calc(2vh);">
						<image src="../../static/logo.png" style="width: calc(26vw);height: calc(15vh);"></image>
					</view>
					<view class="head-text" style="width: calc(61vw);display: inline-block;position: absolute; position:sticky;vertical-align: top;">
						<view>{{user.username}}</view>
						<view>抖音号：</view>
						<view>
							<text v-for="(item,index) in user.species" :key=index style="font-size: calc(1vh);margin: 0 calc(1vw) 0 0;color:#FFFFFF;background-color: #25ACFF;">{{item}}</text>
						</view>
						<view>
							<text v-for="(item,index) in user.cooperation" :key="index" style="margin-right: calc(2vw);">{{item}}</text>
						</view>
						<view style="display: flex; height: calc(9vh); margin-top: calc(0.1vh);">
							<view class="body-title">
								<text style="font-size: calc(2vh);font-weight: 700">{{user.fans}}</text>
								<text style="font-size: calc(1vh);color: #C8C7CC;">粉丝数</text>
							</view>
							<view class="body-title">
								<text style="font-size: calc(2vh);font-weight: 700">￥{{user.videoCooperation}}</text>
								<text style="font-size: calc(1vh);color: #C8C7CC;">短视频合作</text>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view style="display: inline-block;">
				<view class="body-data" style="display: inline-block;">
					<view style="display: inline-block;position:sticky;width: calc(30vw);margin-top: calc(2vh);">
						<image :src="user.avatar" style="width: calc(26vw);height: calc(15vh);"></image>
					</view>
					<view class="head-text" style="width: calc(61vw);display: inline-block;position: absolute; position:sticky;vertical-align: top;">
						<view style="margin-top: calc(7vh);">{{user.nickname}}</view>
						<!-- <view>抖音号：</view>
						<view>
							<text v-for="(item,index) in user.species" :key=index style="font-size: calc(1vh);margin: 0 calc(1vw) 0 0;color:#FFFFFF;background-color: #25ACFF;">{{item}}</text>
						</view>
						<view>
							<text v-for="(item,index) in user.cooperation" :key="index" style="margin-right: calc(2vw);">{{item}}</text>
						</view> -->
						<!-- <view style="border: #FFFFFF solid 1rpx; width: 100%;"></view> -->
						<!-- <view style="display: flex; height: calc(9vh); margin-top: calc(0.1vh);">
							<view class="body-title">
								<text style="font-size: calc(2vh);font-weight: 700">{{fans}}</text>
								<text style="font-size: calc(1vh);color: #C8C7CC;">粉丝数</text>
							</view>
							<view class="body-title">
								<text style="font-size: calc(2vh);font-weight: 700">￥{{user.videoCooperation}}</text>
								<text style="font-size: calc(1vh);color: #C8C7CC;">短视频合作</text>
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="body-data back" style="display: inline-block;">
				<view style="padding: calc(2vh) 0 0 calc(3vw);">
					<text style="font-size: calc(2.5vh);font-weight: 700;">视频数据</text>
				</view>
				<view class="body-data-videoData" v-for="(item,index) in video" :key="index" style="width: calc(40vw);height: calc(55vh);">
					<view>
						<image :src="item.cover" style="width: calc(20vh);height: calc(35vh);"></image>
					</view>
					<view style="text-align: center;">
						<text>{{item.title | ellipsis}}</text>
					</view>
					<view style="text-align: center;">
						<view style="display: inline-block;padding: 0 calc(1vw);">
							<image class="image" src="../../static/like.png"></image>
							<text style="padding: 0 calc(1vw);">{{item.diggCount}}</text>
						</view>
						<view style="display: inline-block;padding: 0 calc(1vw);">
							<image class="image" src="../../static/message.png"></image>
							<text style="padding: 0 calc(1vw);">{{item.commentCount}}</text>
						</view>
						<view style="display: inline-block;padding: 0 calc(1vw);">
							<image class="image" src="../../static/share.png"></image>
							<text style="padding: 0 calc(1vw);">{{item.shareCount}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="back">
				<view style="padding: calc(2vh) 0 0 calc(3vw);">
					<text style="font-size: calc(2.5vh);font-weight: 700;">视频数据</text>
				</view>
				<view>
					<view class="body-data-videoData" style="display: inline-block;" v-for="(item,index) in video" :key="index">
						<view style="width: calc(47vw);">
							<view>
								<image :src="item.cover" style="width: calc(20vh);height: calc(35vh);"></image>
							</view>
							<view style="text-align: center;">
								<text>{{item.title}}</text>
							</view>
							<view style="text-align: center;">
								<view style="display: inline-block;">
									<image class="image" src="../../static/like.png"></image>
									<text>{{item.like}}</text>
								</view>
								<view style="display: inline-block;">
									<image class="image" src="../../static/message.png"></image>
									<text>{{item.comment}}</text>
								</view>
								<view style="display: inline-block;">
									<image class="image" src="../../static/share.png"></image>
									<text>{{item.share}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		filters: {
			ellipsis(value) {
				if (!value) return "";
				if (value.length > 5) {
					return value.substr(0, 13) + "...";
				}
				return value;
			}
		},
		onReachBottom:function(){
			this.page = this.page+1
			this.getVideoInfo()
		},
		onLoad: function(options) {
			this.openId = options.openId
			this.userId = options.userId
			this.getMasterDetail()
			this.getVideoInfo()
			console.log(options)
		},
		data() {
			return {
				page: 0,
				user: {},
				// user: {
				// 	username: "木丁",
				// 	species: ["全品类", "家居日用"],
				// 	cooperation: ["纯佣合作", "短视频合作", "直播合作"],
				// 	carryingMethod: "带货方式",
				// 	fans: "408.23W",
				// 	videoCooperation: "123",
				// 	live: "123",
				// 	servant: "123",
				// 	businessCooperation: "2312312",
				// },
				video: []
			}
		},
		methods: {
			getMasterDetail() {
				let openIdList = []
				openIdList.push(this.openId)
				console.log(openIdList)
				this.$http({
					url: "/base/douyin/info",
					method: "POST",
					data: openIdList,
				}).then(res => {
					this.user = res.data.data[0]
				})
			},
			getVideoInfo(val) {
				let openIdList = []
				openIdList.push(this.openId)
				this.$http({
					url: "/douyin/getVideoList/"+this.page,
					method: "POST",
					data: {
						openId: openIdList
					}
				}).then(res => {
					console.log(res)
					let result = res.data.data.list
					result.forEach((item,index)=>{
						if (this.video.length < res.data.data.total) {
							this.video.push(item)
						}else{
							uni.showToast({
								title: '最后',
								duration: 2000
							});
						}
					})
				})
			},
		}
	}
</script>

<style>
	.body {
		background-color: #F1F1F1;
		height: 100%;
	}

	.body-data-videoData {
		float: left;
		display: inline-block;
		margin: calc(1vh) calc(2vw) 0 calc(2vw);
		width: calc(27vw);
	}

	.body-data {
		display: flex;
		flex-direction: column;
		width: calc(94vw);
		border-radius: calc(1vw);
		margin: calc(1vh) calc(2vw) 0 calc(2vw);
		padding: 0 calc(1vw) 0 calc(1vw);
	}

	.body-title {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: calc(1vw);
		margin: calc(1vh) calc(3vw) 0 calc(3vw);
		padding: 0 calc(1vw) 0 calc(1vw);
	}

	.body-data-videoData {
		float: left;
		margin: calc(1vh) calc(2vw) 0 calc(2vw);
		width: calc(27vw);
	}

	.head {
		background-color: #2C405A;
		height: 30%;
	}

	.head-text {
		color: #FFFFFF;
	}

	.back {
		background-color: #FFFFFF;
	}

	.body-image {
		width: calc(43vw);
		height: calc(37h);
		margin: calc(1vh) calc(2vw);
	}

	.image {
		width: calc(5vw);
		height: calc(3vh);
	}

	.img-group {
		position: relative;
	}

	.img-tip {
		position: absolute;
		background-color: rgba(0, 0, 0, 0.4);
		color: #FFFFFF;
		z-indent: 2;
		width: calc(43vw);
		top: calc(27vh);
		left: calc(2vw);
	}
</style>
